import React, { Component } from 'react';
import ChildRef from './child'
class ParentRef extends Component {
    state = {  } 
    inputRef=React.createRef(null)
    handInput=()=>{
        console.log(this.inputRef.current.value);
    }
    // refs 函数
    inputRef1=null
    handRefs=(ref)=>{
        this.inputRef1=ref
    }
    handInput1=()=>{
        console.log(this.inputRef1.value);
    }

    handChildRef=()=>{
        console.log('绑在组件上的ref',this.refs.childRef1);
    }
    createRefChild1=React.createRef()
    handChildRef1=()=>{
        // console.log(this.createRefChild1);
        const msg =this.createRefChild1.current.say()
        console.log(msg);
    }
    // ref函数
    createRefChild2=null
    setCreateChildRef=(ref)=>{
        this.createRefChild2=ref
    }
    handChildRef2=()=>{
        console.log('绑定在组件上的ref/ref函数',this.createRefChild2);
        const msg=this.createRefChild2.say()
        console.log(msg);
    }
    render() { 
        return (<div>
            <h3>7.1.1父传子ref/refs</h3>
            <h4>7.1.2 ref绑定在html元素上的使用</h4>
            {/* createRef */}
            <input type="text" ref={this.inputRef} placeholder='请输入内容' />
            <button onClick={this.handInput}>获取input内容</button> <br />
            {/* refs函数 */}
            <input type="text" ref={this.handRefs} placeholder='请输入内容' />
            <button onClick={this.handInput1}>获取inputRef1-refs方式</button>
            {/* 加载子组件 调用子组件的方式-父和子通信 */}
            <h4>7.1.3 ref绑定组件上的使用</h4>
            <button onClick={this.handChildRef}>获取组件的实例-ref字符串方式</button>
            <ChildRef ref='childref1'/>
            <ChildRef ref={this.createRefChild1}/>
            <ChildRef ref={this.setCreateChildRef}/>
            <button onClick={this.handChildRef1}> 获取组件的实例React</button>
            <button onClick={this.handChildRef2}>获取组件的实例ref函数</button>
        </div>);
    }
}
 
export default ParentRef;